import 'dart:math';

import 'package:flutter/material.dart';
import 'package:flutterapp/chapter/ten/turn_box.dart';

import 'gradient_circular_progress_indicator.dart';

/// @date 2020/08/24  17:21
/// @author 程志强
/// @des 自定义进度条

class CustomProgressIndicatorRoute extends StatefulWidget {
  @override
  _CustomProgressIndicatorRouteState createState() =>
      _CustomProgressIndicatorRouteState();
}

class _CustomProgressIndicatorRouteState
    extends State<CustomProgressIndicatorRoute> with TickerProviderStateMixin {
  AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller =
        AnimationController(vsync: this, duration: Duration(seconds: 3));
    bool isForward = true;
    _controller.addStatusListener((status) {
      if (status == AnimationStatus.forward) {
        isForward = true;
      } else if (status == AnimationStatus.completed ||
          status == AnimationStatus.dismissed) {
        if (isForward) {
          _controller.reverse();
        } else {
          _controller.forward();
        }
      } else if (status == AnimationStatus.reverse) {
        isForward = false;
      }
    });

    _controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("自定义进度条"),
      ),
      body: Center(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            AnimatedBuilder(
              animation: _controller,
              builder: (context, child) {
                return Padding(
                  padding: const EdgeInsets.symmetric(vertical: 16.0),
                  child: Column(
                    children: <Widget>[
                      GradientCircularProgressIndicator(
                        // No gradient
                        colors: [Colors.blue, Colors.blue],
                        radius: 50.0,
                        strokeWidth: 3.0,
                        value: _controller.value,
                      ),
                      GradientCircularProgressIndicator(
                        colors: [Colors.red, Colors.orange],
                        radius: 50.0,
                        strokeWidth: 3.0,
                        value: _controller.value,
                      ),
                      GradientCircularProgressIndicator(
                        colors: [Colors.red, Colors.orange, Colors.red],
                        radius: 50.0,
                        strokeWidth: 5.0,
                        value: _controller.value,
                      ),
                      GradientCircularProgressIndicator(
                        colors: [Colors.teal, Colors.cyan],
                        radius: 50.0,
                        strokeWidth: 5.0,
                        strokeCapRound: true,
                        value: CurvedAnimation(
                            parent: _controller,
                            curve: Curves.decelerate)
                            .value,
                      ),
                      //剪裁半圆
                      ClipRect(
                        child: Align(
                          alignment: Alignment.topCenter,
                          heightFactor: .5,
                          child: Padding(
                            padding: const EdgeInsets.only(bottom: 8.0),
                            child: SizedBox(
                              //width: 100.0,
                              child: TurnBox(
                                turns: .75,
                                child: GradientCircularProgressIndicator(
                                  colors: [Colors.teal, Colors.cyan[500]],
                                  radius: 100.0,
                                  strokeWidth: 8.0,
                                  value: _controller.value,
                                  totalAngle: pi,
                                  strokeCapRound: true,
                                ),
                              ),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                );
              },
            )
          ],
        ),
      ),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}
